<template>
    <div>
        <div class="business-body" v-show="isModel">
              <div class="business-container">
                  <div class="business-header flex flex-align-center">
                      <p class="flex-1">{{model_name}}</p>
                      <img src="@/assets/img/business/business-close.png" alt="" @click="closeModelFun">
                  </div>
                  <div class="business-cont">
                      <p class="business-title">{{text_title_one}}</p>
                      <div class="business-text-cont" v-html="text_cont">
                      </div>
                      <p class="business-title">{{text_title_two}}</p>
                      <div class="business-text-cont clearfix " style="margin-top:0.05rem">
                        <div class="checkboxBox flex flex-align-center" v-for="(city,index) in cities" :key="index" @click="changeFun(city.cooperation_id)">
                             <div class="chabox flex flex-align-center flex-pack-center" :class="{active:city.status}">
                                 <p v-if='city.status'>√</p>
                             </div>
                             <p>{{city.option}}</p>
                        </div>
                      </div>
                      <p class="business-title" style="margin-top:0.2rem">{{text_title_th}}</p>
                      <div class="business-text-cont business-text-cont_th">
                         <textarea name="" id="" cols="90" rows="8" placeholder="请输入要补充的内容" v-model="textarea_cont"></textarea>
                         <p class="tips">{{text_length}}/1000</p>
                      </div>
                       <p class="business-title">{{text_title_f}}</p>
                      <div class="business-text-cont business-text-cont_th">
                         <input type="text" v-model="input_cont" placeholder="请输入您的手机号">
                      </div>
                      <div class="btn flex flex-align-center flex-pack-center" @click="postBtnFun"><p>提交</p></div>
                  </div>
              </div>  
        </div>
    </div>
</template>
<script>
import https from '@/public/https'
export default {
    data () {
        return {
           model_name:'商务合作',
           text_title_one:'关于我们',
           text_cont:'',
           text_title_two:'选择你要的合作',
           cities: [],
           isIndeterminate: true,
           checkAll: false,
           text_title_th:'补充详细信息（选填）',
           textarea_cont:'',
           text_title_f:'联系方式',
           input_cont:'',
           checkedCities:[],
           text_length:0
        }
    },
    props: {
        isModel:{
            type:Boolean,
            default:false
        }
    },
    watch: {
        isModel(news,old){
            if(news){
                this.getObtainCooperation();
            }
        },
        textarea_cont(news,old){
           let x = this.calCount(news)/2;
           this.text_length =  Math.round(x);
        }
    },
    methods: {
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      postBtnFun(){ //提交数据
        let uid = this.$store.state.userInfo.id;
        let mobile = this.input_cont;
        let information = this.textarea_cont;
        let cooperation_id = this.checkedCities.toString();
        if(mobile != ''&& cooperation_id != ''){
            https.post('cooperation/postAddCooperation',{uid:uid,mobile:mobile,information:information,cooperation_id:cooperation_id})
            .then(data => {
                if(data.status == 1){
                  this.input_cont = '';
                  this.textarea_cont = '';
                  this.checkedCities = [];
                  this.$toast({message: '工作人员将于24小时内回复'});    
                  this.$emit('closed');
                }else{
                    this.$toast({massge:data.message});
                }
            })
        }
      },
      changeFun(id){ //复选框
            for(let i in this.cities){
                if(this.cities[i].cooperation_id == id ){
                  if(this.cities[i].status){
                      this.cities[i].status = false;
                        let index = this.checkedCities.indexOf(id);
                        if (index > -1) {
                            this.checkedCities.splice(index, 1);
                        };
                  }else{
                      this.cities[i].status = true;
                      this.checkedCities.push(id);
                  }
                }
            }
      },
      closeModelFun(){ //关闭窗口
        this.checkedCities = [];
        this.$emit('closed');
      },
      getObtainCooperation(){ //获取商务合作选项
        this.https('common/getObtainCooperation')
        .then(data => {
            for(var i in data.cooperation_option){
                data.cooperation_option[i].status = false;
            }
            this.text_cont = data.about_us;
            this.cities = data.cooperation_option;
        })
      },
      calCount(data){
        var Words= data;  
        var W = new Object();  
        var Result = new Array();  
        var iNumwords = 0;  
        var sNumwords = 0;  
        var sTotal = 0;//双字节字符;  
        var iTotal = 0;//中文字符；  
        var eTotal = 0;//Ｅ文字符  
        var otherTotal = 0;  
        var bTotal = 0;  
        var inum = 0;     
        for (var i=0; i<Words.length; i++) {  
            var c = Words.charAt(i);  
            if (c.match(/[\u4e00-\u9fa5]/)) {  
                if (isNaN(W[c])) {  
                    iNumwords++;  
                    W[c] = 1;  
                }  
                iTotal++;  
            }  
        }  
        for (var i=0; i<Words.length; i++) {  
            var c = Words.charAt(i);  
            if (c.match(/[^\x00-\xff]/)) {  
                if (isNaN(W[c])) {  
                    sNumwords++;  
    
                }  
                sTotal++;  
            }  
            else  
            {  
            eTotal++;  
            }  
            if (c.match(/[0-9]/)) {  
                inum++;  
            }  
        }  
        return iTotal*2+(sTotal-iTotal)*2+eTotal;  
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/contectus/business.less);
</style>


